import React from "react";
import MallModel from "../../../model/mall";
import Admin from "../../../layout/Admin";
import {Button, Input, Popconfirm, Popover, Radio, Table} from "antd";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import moment from "moment";
import Info from "../../../service/info";
const log = console.log.bind(console)
class MallDeal extends React.Component {
    constructor(props) {
        super(props)
        this.model = new MallModel()
        this.state = {
            list: [],
            p: 0,
            settle: -1,
            express: '',
            expressPop: false,
        }
        this.columns = [

            // Express: ""
            // Img: ""
            // Num: 1

            // Settlet: 0

            // Uid: "e5823f37-2e03-4e0e-b647-751bbe48a679"
            {
                title: 'Uid',
                dataIndex: 'Uid',
            },
            // Dealno: "20210313144919.10"
            {
                title: '订单编号',
                dataIndex: 'Dealno',
            },
            // Createt: 1615618159
            {
                title: '时间',
                dataIndex: 'Createt',
                render: (time) => moment(new Date(time * 1000)).format('YYYY-MM-DD HH:mm:ss')
            },
            //// Cost: 100
            {
                title: '价格',
                dataIndex: 'Cost',
            },
            // Express
            {
                title: '快递单号',
                dataIndex: 'Express',
            },
            // 状态
            {
                title: '订单状态',
                dataIndex: 'Settle',
                render: (status) => {
                    return status === 1 ? '已发货' : '未发货'
                }
            },
            // Title: "100元话费"
            {
                title: '内容',
                dataIndex: 'Title',
            },
            // Detail
            {
                title: '详情',
                dataIndex: 'Detail',
                render: (detail) => {
                    const entries = Object.entries(JSON.parse(detail))
                    const titles = {
                        phone: '手机号码',
                        name: '姓名',
                        address: '地址',
                        addition: '备注',
                    }
                    return <div>
                        {entries.map(([key, value], index) => <p key={index}>{titles[key]} : {value}</p>)}
                        {/*{Object.keys(detail).map(key => <p>{titles}: {detail[key]}</p>)}*/}
                    </div>
                }
            },
            {
                title: '操作',
                render: (record) => {
                    return <div className='action-links'>

                        {record.Settle === 0 &&<Popover
                            content={<div>
                                <Input value={this.state.express} onChange={e => this.setState({express: e.target.value,})}/>
                                <Button
                                    onClick={() => this.send(record)}
                                >确定</Button>
                            </div>}
                            title='快递单号'
                            trigger='click'
                        >
                            <a>发货</a>
                        </Popover>}
                        <Popconfirm title='确认删除？'
                                    onConfirm={() => this.delete(record)}
                        >
                            <a>删除</a>
                        </Popconfirm>

                    </div>
                }
            }

        ]
    }

    componentDidMount() {
        this.all()
    }

    all = () => {
        const params = {
            p: this.state.p,
            uid: '',
            settle: this.state.settle,
        }
        this.model.deal(params)
            .then((res) => {
                const list = res.data.ok
                if (list) {
                    log(list)
                    this.setState({
                        list,
                    })
                }
            })
    }

    delete = (record) => {
        this.model.delete({dealno: record.Dealno}).then(() => this.all())
    }

    send = (record) => {
        log(record)
        this.model
            .send({
                dealno: record.Dealno,
                express: this.state.express,
            })
            .then((res) => {
                if (res.data.ok) {
                    Info.success('发货成功')
                    this.setState({
                        express: '',
                    })
                    this.all()
                }
            })
    }

    prevPage = () => {
        this.setState({
            p: this.state.p - 1,
        }, () => this.all())
    }

    nextPage = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    render() {
        return <>
            <Admin>
                <div className='list-container'>
                    <div style={{marginBottom: '8px',}}>
                        <Radio.Group
                            value={this.state.settle}
                            onChange={(e) => {
                                this.setState({
                                    settle: e.target.value,
                                    p: 0,
                                }, () => this.all())
                            }}
                        >
                            <Radio value={-1}>所有</Radio>
                            <Radio value={0}>未处理</Radio>
                            <Radio value={1}>已处理</Radio>
                        </Radio.Group>
                    </div>
                    <Table
                        dataSource={this.state.list}
                        columns={this.columns}
                        pagination={false}
                        rowKey={(record, index) => index}
                    />

                    <PaginationFooter
                        pageIndex={this.state.p}
                        prevPage={this.prevPage}
                        nextPage={this.nextPage}
                    />
                </div>
            </Admin>
        </>
    }
}

export default MallDeal